<template>
  <div class="about">
    <bcd-top title="资讯" englishtitle="NEWS" />
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="margin-top: 10px"
    >
      <el-tab-pane
        label="产品资讯"
        style="font-weight: 500; font-size: 16px"
        name="first"
      ></el-tab-pane>
      <el-tab-pane
        label="行业资讯"
        style="font-weight: 500; font-size: 16px"
        name="second"
      ></el-tab-pane>
      <el-tab-pane
        label="国际资讯"
        style="font-weight: 500; font-size: 16px"
        name="third"
      ></el-tab-pane>
    </el-tabs>
    <transition name="el-fade-in-linear">
      <router-view></router-view>
    </transition>
    <footer-part></footer-part>
    <el-backtop target=".about .center_news_item" :bottom="100">
      <div
        style="
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
        "
      >
        UP
      </div>
    </el-backtop>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import imageText from "../components/imageText";
import footerPart from "../views/footer";
import { articleCateglory, articlExample } from "../api/api";
import newsItem from "../components/newsItem";
import bcdTop from "../components/bcdTop";

export default {
  data() {
    return {
      total: "",
      activeName: "first",
      tablist: ["产品资讯", "行业资讯", "国际资讯"],
      bottom_list: [1, 2, 3, 4],
    };
  },
  components: {
    imageText,
    footerPart,
    newsItem,
    bcdTop,
  },
  created() {
    if (this.aboutpath == "/newsProduct") {
      this.activeName = "first";
    } else if (this.aboutpath == "/newsHangye") {
      this.activeName = "second";
    } else {
      this.activeName = "third";
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log("--00--",to)
      if (to.path == "/newsProduct") {
        vm.activeName = "first";
      } else if (to.path == "/newsHangye") {
        vm.activeName = "second";
      } else {
        vm.activeName = "third";
      }
    });
  },
  computed: {
    ...mapGetters({
      aboutpath: "aboutPath",
    }),
  },
  watch: {
    aboutpath(val) {
      if (val == "/newsProduct") {
        this.activeName = "first";
      } else if (val == "/newsHangye") {
        this.activeName = "second";
      } else {
        this.activeName = "third";
      }
    },
  },
  mounted() {
    this.getNews(0);
    this.articlExample();
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getNews(val - 1);
    },
    handleClick(tab) {
      console.log(tab.index);
      switch (tab.index) {
        case "0":
          this.$router.push("/newsProduct");
          break;
        case "1":
          this.$router.push("/newsHangye");
          break;
        case "2":
          this.$router.push("/newsGloub");
          break;
      }
    },
    async getNews(val) {
      const data = await articleCateglory({
        pageNo: val,
        pageSize: 10,
        pageType: "P",
      });
      console.log("daa", data);
    },
    handleSelect(index) {
      console.log(index);
    },
    async articlExample() {
      let data = await articlExample({
        cid: 100,
        pageNo: 0,
        pageSize: 12,
        pageType: "P",
        title: "",
      });
      console.log("777", data.data);
      this.bottom_list = data.data.data;
      this.total = data.data.count;
    },
  },
};
</script>
<style scoped>
.el-tabs__nav-wrap::after {
  width: 0;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
::v-deep .el-tabs__active-bar{
  background-color: transparent;
}
.el-menu.el-menu--horizontal {
}
</style>
<style scoped>
.el-tabs__nav-wrap::after {
  width: 0;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
.tab {
  width: 100%;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  background-color: #fff;
  margin: 0 10px;
  justify-content: center;
}
.tabitem {
  color: #2a333c;
  font-size: 16px;
  margin-right: 20px;
}
.news {
  width: 100%;
  background-color: #f2f2f2;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.newsLeft {
  background-color: #fff;
}
.newRight {
  width: 30%;
  background-color: #fff;
}
.pagination {
  width: 100%;
  padding: 10px 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  background-color: #f2f2f2;
}
</style>